<!DOCTYPE html>
<html>
  <head>
    <title>Apache Jena Fuseki - inspect dataset</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
    <link href="css/qonsole.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-select.min.css" rel="stylesheet" media="screen">

    <link href="css/jquery.fileupload-ui.css" rel="stylesheet" media="screen">
    <link href="css/jquery.fileupload.css" rel="stylesheet" media="screen">

    <link href="css/fui.css" rel="stylesheet" media="screen">
    
    <link href="css/codemirror.min.css" rel="stylesheet">
    <link href="css/yasqe.min.css" rel="stylesheet">
    <link href="css/yasr.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="js/lib/html5shiv.js"></script>
      <script src="js/lib/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <div class="row">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
              <img src="images/jena-logo-notext-small.png" alt="Apache Jena logo" title="Apache Jena" />
              <div>Apache<br />Jena<br /><strong>Fuseki</strong></div>
            </a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
              <li class=""><a href="index.html"><i class="fa fa-home"></i></a></li>
              <li class="active"><a href="dataset.html"><i class="fa fa-database"></i> dataset</a></li>
              <li class=""><a href="manage.html"><i class="fa fa-cogs"></i> manage datasets</a></li>
              <!-- JENA-887 not yet implemented
              <li class=""><a href="services.html"><i class="fa fa-wrench"></i> services</a></li>
              -->
              <li class=""><a href="documentation.html"><i class="fa fa-info-circle"></i> help</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="status-indicator">
                <div>Server<br />status:</div>
              </li>
              <li class="status-indicator">
                <a class="" href="#admin/server-log.html" id="server-status-light" title="current server status">
                  <span class="server-up"></span>
                </a>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /row -->
      </div><!-- /container -->
    </nav>

    <div class="container">

      <div class="row">
        <div class="col-md-12">
          <div class="dataset-selector-container"></div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="content-frame">
            <ul class="nav nav-tabs">
              <li><a href="#query" data-toggle="tab"><i class='fa fa-question-circle'></i> query</a></li>
              <li><a href="#upload" data-toggle="tab"><i class='fa fa-upload'></i> upload files</a></li>
              <li><a href="#edit" data-toggle="tab"><i class='fa fa-edit'></i> edit</a></li>
              <li><a href="#info" data-toggle="tab"><i class='fa fa-dashboard'></i> info</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane" id="query">
                <div class="no-dataset">Please select a dataset.</div>
                <div class="with-dataset hidden">
                  <div class="row">
                    <div class="col-md-12">
                      <h2>SPARQL query</h2>
                      <p>To try out some SPARQL queries against the selected dataset, enter your
                      query here.</p>

                      <div class="qonsole">
                        <div class="col-md-12 well">
                          <h2 class="">Example queries</h2>
                          <ul class="list-inline examples">
                          </ul>
                        </div>

                        <div class="col-md-12 well vertical">
                          <h2 class="">Prefixes</h2>
                          <ul class="list-inline prefixes">
                            <li class="keep">
                              <a data-toggle="modal" href="#prefixEditor" class="btn btn-custom2 btn-sm" title="Add a SPARQL prefix">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="col-md-12 well">
                            <div class="query-chrome" style="margin-top:0px; display:inline-block;vertical-align: top;width:40%;">
                                  <div class="form-group">
                                    <label for="sparqlEndpoint">SPARQL endpoint</label>
                                    <input type="text" class="form-control" id="sparqlEndpoint" />
                                  </div>
                            </div>
                             <div class="query-chrome" style="margin-top:0px; display:inline-block; vertical-align: top;width:28%">
                                  <div class="form-group">
                                    <label for="selectContentType">Content Type (Select)</label>
                                    <select id="selectContentType" class="form-control">
                                      <option value="application/sparql-results+json">JSON</option>
                                      <option value="application/sparql-results+xml">XML</option>
                                      <option value="text/csv">CSV</option>
                                      <option value="text/tab-separated-values">TSV</option>
                                    </select>
                                  </div>
                            </div>
                            <div class="query-chrome" style="margin-top:0px; display:inline-block; vertical-align: top;width:28%">
                                  <div class="form-group">
                                    <label for="graphContentType">Content Type (Graph)</label>
                                    <select id="graphContentType" class="form-control">
                                      <option value="text/turtle">Turtle</option>
                                      <option value="application/ld+json">JSON-LD</option>
                                      <option value="application/n-triples">N-Triples</option>
                                      <option value="application/rdf+xml">XML</option>
                                    </select>
                                  </div>
                            </div>
                        </div>
                        <div class="col-md-12 well">
                          <div class="query-edit">
                            <div id="query-edit-cm" class=""></div>
                          </div>
                        </div>

                        <!-- results -->
                        <div id="results-block" class="row sparql sparql-results">
                          <div class="col-md-12">
                            <div class="well">
                              <div class="row">
                                <div class="col-md-12">
                                  <span class="loadingSpinner hidden">
                                    <img src="images/wait30.gif" alt="waiting for server action to complete" />
                                  </span>
                                  <span class="timeTaken hidden"></span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-12" id="results">
                                  <h2 class="col-md-12">Query results</h2>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="row clearfix"></div>
                      </div><!-- /.qonsole -->

                      <!-- modal dialogue -->
                      <div class="modal fade" id="prefixEditor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                              <h4 class="modal-title">Add a SPARQL prefix</h4>
                            </div>
                            <div class="modal-body">
                              <form class="form-horizontal" role="form">
                                <div class="form-group">
                                  <label for="inputPrefix" class="col-lg-2 control-label">Prefix</label>
                                  <div class="col-lg-10">
                                    <input type="text" class="form-control" id="inputPrefix" placeholder="Prefix" autofocus>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <div class="col-lg-offset-2 col-lg-10">
                                    <button class="btn btn-sm btn-primary" id="lookupPrefix">Lookup <span></span> on prefix.cc</button>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="inputURI" class="col-lg-2 control-label">URI</label>
                                  <div class="col-lg-10">
                                    <input type="text" class="form-control" id="inputURI" placeholder="URI">
                                  </div>
                                </div>
                              </form>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
                              <button type="button" class="btn btn-primary" data-dismiss="modal" id="addPrefix">add prefix</button>
                            </div>
                          </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                      </div><!-- /.modal -->

                    </div>

                  </div> <!-- .col-md-12 -->
                </div> <!-- /.with-dataset -->
              </div>

              <div class="tab-pane" id="upload">
                <div class="no-dataset">Please select a dataset.</div>
                <div class="with-dataset hidden">
                  <div class="row">
                    <div id="file-upload"></div>
                  </div> <!-- /.row -->
                </div>
              </div>

              <div class="tab-pane" id="edit">
                <div class="no-dataset">Please select a dataset.</div>
                <div class="with-dataset hidden"></div>
              </div>

              <div class="tab-pane" id="info">
                <div class="no-dataset">Please select a dataset.</div>
                <div class="with-dataset hidden">
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <script data-main="js/app/main.dataset.js" src="js/lib/require.js"></script>
  </body>
</html>
